<template>
	<view>
		<view class="tabbar" id="tabbar">
			<view class="tabbar-item" :class="[activeIndex === i ? 'active' : '', 'tabbar-' + deviceType]" @click="jump(item)" v-for="(item, i) in list" :key="i">
				<image class="icon" :class="item.bigger ? 'bigger' : ''" :src="activeIndex === i ? item.activeIconPath : item.iconPath" mode="heightFix"></image>
				<view>{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props: {
			activeIndex: {
				type: Number
			}
		},
		data() {
			return {
				deviceType: this.$util.deviceType(), // 返回值：pad/phone
				list: [{
						"pagePath": "/pages/tabbar/home/index",
						// "iconPath": "https://cdn.spbcn.org/yanxuan/seasonstar_homepage_icon1.png",
						"iconPath": require('../static/image/homePage/tabbar-icon-home.png'),
						"activeIconPath":  require('../static/image/homePage/tabbar-icon-home-a.png'),
						"text": "首页"
					},
					// {
					// 	"pagePath": "/pages/tabbar/awards/index",
					// 	"iconPath": "https://cdn.spbcn.org/yanxuan/seasonstar_homepage_icon2.png",
					// 	"text": "奖项"
					// },
					// {
					// 	"pagePath": "/pages/tabbar/planB/index",
					// 	"iconPath": "https://cdn.spbcn.org/yanxuan/seasonstar_homepage_icon3.png",
					// 	"text": "蜂计划",
					// 	"bigger": true,
					// 	"jumpOut": true
					// },
					// {
					// 	"pagePath": "/pages/tabbar/rank/index",
					// 	"iconPath": "https://cdn.spbcn.org/yanxuan/seasonstar_homepage_icon4.png",
					// 	"text": "天梯榜"
					// },
					{
						"pagePath": "/pages/tabbar/userCenter/index",
						// "iconPath": "https://cdn.spbcn.org/yanxuan/seasonstar_homepage_icon5.png",
						"iconPath": require('../static/image/homePage/tabbar-icon-user.png'),
						"activeIconPath":  require('../static/image/homePage/tabbar-icon-user-a.png'),
						"text": "我的"
					}
				]
			};
		},
		methods: {
			init() {
				console.log(this.deviceType)
				uni.createSelectorQuery().select('#tabbar').boundingClientRect().exec(function(res) {
				  // res[0]为元素信息
				  console.log(res[0])
				})	
			},
			jump(item) {
				if (item.jumpOut) {
					// 定义要跳转的目标小程序信息
					const targetMiniProgram = {
					  appId: 'wx0cd131a3554ae0be', // 蜂拥教育小程序appid
					  path: '/pages/beePlan/beePlan', // 可选参数，指定打开的页面路径
					  extraData: {}, // 可选参数，传递给目标小程序的数据
					}
					 
					// 调用uni.navigateToMiniProgram()函数进行跳转
					uni.navigateToMiniProgram(targetMiniProgram)
				} else {
					// relunch页面会闪动
					uni.switchTab({
						url: item.pagePath
					})
				}
			}
		}
	}
</script>

<style lang="less">
.tabbar{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 80px;
	z-index: 9999;
	padding-top: 10rpx;
	// padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
	// padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #000;	
	border-top: 1rpx solid #dcdfe6;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.tabbar-item{
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		line-height: 16px;
		.icon{
			width: 60rpx;
			height: 60rpx;
		}
		.bigger{
			width: 90rpx;
			height: 90rpx;
			position: relative;
			left: 0;
			top: -30rpx;
			margin-bottom: -30rpx;
		}
		&.active{
			color: #facd68;
		}
	}
	.tabbar-pad{
		font-size: 12px;
		.icon{
			width: 30px;
			height: 30px;
		}
	}
}
</style>